import React from 'react';

import { ModalContext } from '@/shared/context/ModalContext';
import { Modals } from '@/shared/interfaces';
import { useMetaTag } from '@/shared/lib/hooks';
import { Button, ButtonVariants, FlexWrapper, Modal } from '@/shared/ui';
import cn from 'classnames';
import { useRouter } from 'next/router';
import { useWindowSize } from 'usehooks-ts';

import s from './ConfirmSendModal.module.scss';

export const ConfirmSendModal = () => {
  const router = useRouter();
  const { width } = useWindowSize();
  useMetaTag(true, '#999999');
  const { closeModal, data, openModal, setData } = React.useContext(ModalContext);
  const handleClose = () => {
    if (data?.url) {
      router.push(data.url);
    }
    /* eslint-disable no-lone-blocks */
    setData(() => {
      {
        ('b');
      }
    });
    closeModal();
  };
  const handleCloseCross = () => {
    closeModal();
  };
  const openFeedbackBack = () => {
    setData(data);
    if (data.fromProfile) {
      closeModal();
    } else {
      openModal(Modals.FeedbackModal);
    }
  };
  return (
    <Modal className={s.modal} isOpen onCloseClick={handleCloseCross}>
      {data?.isFull ? (
        <FlexWrapper isCenter>
          <h4 className={s.title}>Отправить сообщение?</h4>
          {/* {width > 1024 && (
            <div className={s.chevronLeft} onClick={openFeedbackBack}>
              <ChevronLeft />
            </div>
          )} */}
          <Button
            data-testid="button-send_message"
            disabled={false}
            onClick={() => data.handleSendMessage()}
            style={{ marginBottom: '24px' }}
            variant={ButtonVariants.Primary}
          >
            Отправить
          </Button>
          <FlexWrapper className={cn(s.insideBlock)}>
            <span className={s.exit} onClick={handleClose}>
              Не отправлять
            </span>
          </FlexWrapper>
        </FlexWrapper>
      ) : (
        <FlexWrapper isCenter>
          <h4 className={s.title}>Продолжить заполнение?</h4>
          {/* {width > 1024 && (
            <div
              className={s.chevronLeft}
              onClick={() => {
                if (data.fromProfile) {
                  closeModal();
                } else {
                  openModal('feedback');
                }
              }}
            >
              <ChevronLeft />
            </div>
          )} */}
          <Button
            className={s.continue}
            data-testid="button-modal-feedback"
            disabled={false}
            onClick={openFeedbackBack}
            style={{ marginBottom: width > 768 ? '24px' : '16px' }}
            variant={ButtonVariants.Primary}
          >
            Продолжить
          </Button>
          <FlexWrapper className={cn(s.insideBlock)}>
            <Button className={s.exit} onClick={handleClose} variant={ButtonVariants.LinkDanger}>
              Выйти
            </Button>
          </FlexWrapper>
        </FlexWrapper>
      )}
    </Modal>
  );
};
